<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示会员</title>
    <link type="text/css" rel="stylesheet" href="./layui/css/layui.css"/>
    <style rel="stylesheet" type="text/css">
        .right{
            margin-right: 5px;
            text-align: center;
        }
    </style>
</head>

<body class="layui-layout-body">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>会员信息</legend>
</fieldset>

<table id="test" lay-filter="test"></table>
<script type="text/html" id="toolBar">
    <a class="layui-btn layui-btn-xs" lay-event="save">保存</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script  type="text/javascript" src="./layui/layui.all.js"></script>
<script>
    var $ = layui.jquery;
    var table = layui.table;
    var element = layui.element;
    table.render({
        elem: '#test'
        , height: 500
        , url: '/selectallvip.action' //数据接口
        , cols: [[ //表头
            {field: 'vid', title: 'ID', width: 80, sort: false, fixed: 'left'}
            , {field: 'vname', title: '会员姓名', width: 190 , edit: 'text'}
            , {field: 'vpwd', title: '会员密码', width: 150, sort: false , edit: 'text'}
            , {field: 'vsex', title: '会员性别', width: 200, sort: false , edit: 'text'}
            , {field: 'vrestmoney', title: '卡内余额', width: 240, sort: false , edit: 'text'}
            , {field: 'vphone', title: '会员电话', width: 120, sort: false , edit: 'text'}
            , {width: 300, title: '常用操作', align: 'center', toolbar: '#toolBar', fixed: 'right' , edit: 'text'}

        ]]
        ,page : true
    });
</script>
<script>
    //监听工具条
    table.on('tool(test)', function (obj) {
        if (obj.event === 'save') {     //save
            var data = obj.data;
            layer.confirm('保存会员信息', function (index) {
                $.ajax({
                    url: "/saveVip.action",
                    type: "POST",
                    data: data
                }).done(function (data) {
                    layer.close(index);
                    window.alert("保存成功");
                }).fail()
            });

        } else if (obj.event === 'del') {
            var data = obj.data;
            layer.confirm('真的删除该会员吗?', function (index) {
                $.ajax({
                    "url": "/deletevip.action?vid=" + data.vid,
                });
                obj.del();
                layer.close(index);
            });
        }
    });
</script>
<script>
        //监听单元格编辑
        table.on('edit(test)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.vid +'] ' + field + ' 字段更改为：'+ value);

        });

</script>
</body>
</html>